import React from 'react'
import Top from '../top/'
import Nav from '../nav/'
import './flow.css'
import {Link} from 'react-router-dom'
import { Breadcrumb,Message } from 'element-react';
import axios from 'axios'


class Flow extends React.Component{
	constructor( props ){
		super( props );
		this.state={
			moneyList:{},
			weightList:{},
			weightFlow:true,
			moneyFlow:true,
			messageFlow:true,
			weight:false,
			money:false,
			filed_msg:'请检查网络连接'
		};
		this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
		this.resize = this.resize.bind(this);
		this.getflowWeightStyle = this.getflowWeightStyle.bind(this);
		//this.handleNavClick = this.handleNavClick.bind(this);
	}

	render(){
		return(
			<div className='flow-main'>
				<Top />
				<Nav />
				<div className='flow-content-container'>
					{/*<h3 className='small-nav'>
						<img src={require('../../assets/img/icon_close_nav.png')} alt='展开导航' title='展开导航' onClick={this.handleNavClick} />
					</h3>*/}
					<div className='flow'>
						<Breadcrumb separator=">" className='flow-bread'>
					      	<Breadcrumb.Item><Link to="/home">首页</Link></Breadcrumb.Item>
					      	<Breadcrumb.Item className='flow-bread-second'>业务流程</Breadcrumb.Item>
					    </Breadcrumb>
					    <div className='flow-container'>
							<div className='flow-control'>
								<div className='flow-control-part'>
									<span className='flow-checkbox-true flow-checkbox' span-flag={this.state.weightFlow+''} onClick={this.handleCheckboxClick} _root='true'></span>
									<span className='flow-checkbox-tip flow-checkbox-goods'>---货物流</span>
								</div>
								<div className='flow-control-part'>
									<span className='flow-checkbox-true flow-checkbox' span-flag={this.state.moneyFlow+''} onClick={this.handleCheckboxClick} _root='true'></span>
									<span className='flow-checkbox-tip flow-checkbox-moneyFlow'>---资金流</span>
								</div>
								<div className='flow-control-part'>
									<span className='flow-checkbox-true flow-checkbox' span-flag={this.state.messageFlow+''} onClick={this.handleCheckboxClick} _root='true'></span>
									<span className='flow-checkbox-tip flow-checkbox-message'>---信息流</span>
								</div>
								<div className='flow-control-part'>
									<span className='flow-checkbox-false flow-checkbox' span-flag={this.state.weight+''} onClick={this.handleCheckboxClick} _root='true'></span>
									<span className='flow-checkbox-tip flow-checkbox-weight'>重量</span>
								</div>
								<div className='flow-control-part'>
									<span className='flow-checkbox-false flow-checkbox' span-flag={this.state.money+''} onClick={this.handleCheckboxClick} _root='true'></span>
									<span className='flow-checkbox-tip flow-checkbox-money'>资金</span>
								</div>
							</div>
							<div className='flow-content'>
								<div className='flow-content-top'>
									<div className='flow-spot'>
										<img src={require('../../assets/img/client.png')} />
										<p>居民客户</p>
									</div>
									<div className='flow-direction'>
										<span className='flow-weight' style={this.getflowWeightStyle()}>{this.state.weightList.userToHouseWeight}吨</span>
										<div className='flow-direction-basis flow-direction-goods'>
											<span className='flow-direction-line flow-goods-direction' style={this.getflowWeightLineStyle()}></span>
											<span className='flow-direction1-arrow flow-goods-direction'  style={this.getflowWeightLineStyle()}></span>
										</div>
										<div className='flow-direction-basis'>
											<span className='flow-direction-line flow-message-direction'  style={this.getflowMessageLineStyle()}></span>
											<span className='flow-direction1-arrow flow-message-direction'  style={this.getflowMessageLineStyle()}></span>
										</div>
										<div className='flow-direction-basis'>
											<span className='flow-direction2-arrow flow-money-direction'  style={this.getflowMoneyLineStyle()}></span>
											<span className='flow-direction-line flow-money-direction'  style={this.getflowMoneyLineStyle()}></span>
										</div>
										<span className='flow-money' style={this.getflowMoneyStyle()}>{this.state.moneyList.houseToUserMoney}万元</span>
									</div>
									<div ref={ (kiosk) =>{ this.kiosk=kiosk } } className='flow-spot'>
										<img src={require('../../assets/img/kiosk.png')} />
										<p>服务亭</p>
									</div>
									<div className='flow-direction'>
										<div className='flow-direction-basis flow-direction-goods'>
											<span className='flow-direction-line flow-goods-direction'  style={this.getflowWeightLineStyle()}></span>
											<span className='flow-direction1-arrow flow-goods-direction'  style={this.getflowWeightLineStyle()}></span>
										</div>
										<div className='flow-direction-basis'>
											<span className='flow-direction-line flow-message-direction'  style={this.getflowMessageLineStyle()}></span>
											<span className='flow-direction1-arrow flow-message-direction'  style={this.getflowMessageLineStyle()}></span>
										</div>
									</div>
									<div className='flow-spot'>
										<span className='flow-weight' style={this.getflowWeightStyle()}>{this.state.weightList.houseToPackageStationWeight}吨</span>
										<img src={require('../../assets/img/transfer_trolley.png')} />
										<p>转运车</p>
									</div>
									<div className='flow-direction'>
										<div className='flow-direction-basis flow-direction-goods'>
											<span className='flow-direction-line flow-goods-direction' style={this.getflowWeightLineStyle()}></span>
											<span className='flow-direction1-arrow flow-goods-direction' style={this.getflowWeightLineStyle()}></span>
										</div>
									</div>
									<div ref={ (station) =>{ this.station=station } } className='flow-spot'>
										<img src={require('../../assets/img/packaging_station.png')} />
										<p>分拣中心</p>
									</div>
									<div className='flow-direction'>
										<div className='flow-direction-basis flow-direction-goods'>
											<span className='flow-direction-line flow-goods-direction' style={this.getflowWeightLineStyle()}></span>
											<span className='flow-direction1-arrow flow-goods-direction' style={this.getflowWeightLineStyle()}></span>
										</div>
										<div className='flow-direction-basis'>
											<span className='flow-direction-line flow-money-direction' style={this.getflowMoneyLineStyle()}></span>
											<span className='flow-direction1-arrow flow-money-direction' style={this.getflowMoneyLineStyle()}></span>
										</div>
									</div>
									<div className='flow-spot'>
										<span className='flow-weight' style={this.getflowWeightStyle()}>{this.state.weightList.packageStationToFactoryWeight}吨</span>
										<img src={require('../../assets/img/cars.png')} />
										<p>干线车辆</p>
									</div>
									<div className='flow-direction'>
										<div className='flow-direction-basis flow-direction-goods'>
											<span className='flow-direction-line flow-goods-direction' style={this.getflowWeightLineStyle()}></span>
											<span className='flow-direction1-arrow flow-goods-direction' style={this.getflowWeightLineStyle()}></span>
										</div>
									</div>
									<div className='flow-spot' ref={ ( plant ) =>{ this.plant=plant } }>
										<img src={require('../../assets/img/plant.png')} />
										<p>再生资源加工厂</p>
									</div>
								</div>
								<div className='flow-content-bottom'>
									<div>
										<img />
										<p></p>
									</div>
									<div className='flow-spot' ref={ (customer) =>{this.customer=customer} }>
										<img src={require('../../assets/img/customer.png')} />
										<p>到分拣中心交货的客户</p>
									</div>
									<div className='flow-spot' ref={ ( finance ) =>{this.finance=finance} }>
										<img src={require('../../assets/img/finance.png')} />
										<p>公司财务</p>
									</div>
								</div>
								{/*服务亭到分拣中心*/}
								<div ref={ (kioskTostation_line) =>{ this.kioskTostation_line=kioskTostation_line } } className='flow-kioskTostation-line flow-message-direction' style={this.getflowMessageLineStyle()}></div>
								<div ref={ (kioskTostation_arrow) =>{ this.kioskTostation_arrow=kioskTostation_arrow } } className='flow-kioskTostation-arrow flow-direction3-arrow flow-message-direction' style={this.getflowMessageLineStyle()}></div>
								{/*分拣中心到服务亭*/}
								<div ref={ (stationTokiosk_line) =>{ this.stationTokiosk_line=stationTokiosk_line } } className='flow-stationTokiosk-line flow-money-direction' style={this.getflowMoneyLineStyle()}>
									<p className='flow-money flow-stationTokiosk-money' style={this.getflowMoneyStyle()}>{this.state.moneyList.packageStationToHouseMoney}万元</p>
								</div>
								<div ref={ (stationTokiosk_arrow) =>{ this.stationTokiosk_arrow=stationTokiosk_arrow } } className='flow-kioskTostation-arrow flow-direction4-arrow flow-money-direction' style={this.getflowMoneyLineStyle()}></div>
								{/*加工厂到分拣中心*/}
								<div ref={ (plantTostation_line) =>{ this.plantTostation_line=plantTostation_line } } className='flow-kioskTostation-line flow-message-direction' style={this.getflowMessageLineStyle()}></div>
								<div ref={ (plantTostation_arrow) =>{ this.plantTostation_arrow=plantTostation_arrow } } className='flow-kioskTostation-arrow flow-direction3-arrow flow-message-direction' style={this.getflowMessageLineStyle()}></div>
								{/*加工厂到公司财务*/}
								<div ref={ (plantTofinance_line) =>{ this.plantTofinance_line=plantTofinance_line } } className='flow-plantTofinance-line flow-money-direction' style={this.getflowMoneyLineStyle()}>
									<p className='flow-money flow-plantTofinance-money' style={this.getflowMoneyStyle()}>{this.state.moneyList.factoryToCompanyFinance}万元</p>
								</div>
								<div ref={ (plantTofinance_arrow) =>{ this.plantTofinance_arrow=plantTofinance_arrow } } className='flow-kioskTostation-arrow flow-direction2-arrow flow-money-direction' style={this.getflowMoneyLineStyle()}></div>
								{/*公司财务到分拣中心*/}
								<div ref={ (financeTostation_line) =>{ this.financeTostation_line=financeTostation_line } } className='flow-financeTostation-line flow-money-direction' style={this.getflowMoneyLineStyle()}></div>
								<div ref={ (financeTostation_arrow) =>{ this.financeTostation_arrow=financeTostation_arrow } } className='flow-kioskTostation-arrow flow-direction3-arrow flow-money-direction' style={this.getflowMoneyLineStyle()}></div>
								{/*客户到分拣中心*/}
								<div ref={ (customerTostation_line) =>{ this.customerTostation_line=customerTostation_line } } className='flow-plantTofinance-line flow-goods-direction' style={this.getflowWeightLineStyle()}>
									<p className='flow-weight flow-customerTostation-weight' style={this.getflowWeightStyle()}>{this.state.weightList.userToPackageStationWeight}吨</p>
								</div>
								<div ref={ (customerTostation_arrow) =>{ this.customerTostation_arrow=customerTostation_arrow } } className='flow-kioskTostation-arrow flow-direction3-arrow flow-goods-direction' style={this.getflowWeightLineStyle()}></div>
								{/*分拣中心到交货客户*/}
								<div ref={ (stationTocustomer_line) =>{ this.stationTocustomer_line=stationTocustomer_line } } className='flow-stationTocustomer-line flow-money-direction' style={this.getflowMoneyLineStyle()}>
									<p className='flow-money flow-stationTokiosk-money' style={this.getflowMoneyStyle()}>{this.state.moneyList.packageStationToUserMoney}万元</p>
								</div>
								<div ref={ (stationTocustomer_arrow) =>{ this.stationTocustomer_arrow=stationTocustomer_arrow } } className='flow-kioskTostation-arrow flow-direction4-arrow flow-money-direction' style={this.getflowMoneyLineStyle()}></div>
								{/*加工厂到分拣中心资金流*/}
								<div ref={ (plantTostation_money_line) =>{ this.plantTostation_money_line=plantTostation_money_line } } className='flow-stationTokiosk-line flow-money-direction' style={this.getflowMoneyLineStyle()}>
									<p className='flow-money flow-stationTokiosk-money' style={this.getflowMoneyStyle()}>{this.state.moneyList.factoryToPackageStation}万元</p>
								</div>
								<div ref={ (plantTostation_money_arrow) =>{ this.plantTostation_money_arrow=plantTostation_money_arrow } } className='flow-kioskTostation-arrow flow-direction4-arrow flow-money-direction' style={this.getflowMoneyLineStyle()}></div>
							</div>
						</div>
					</div>
				</div>
				<div className='flow-mask-container' ref={( flow_mask )=>{ this.flow_mask=flow_mask }}>
					<div className='flow-mask'>
						<div className='el-icon-loading flow-mask-loading'></div>
						<p className='flow-loading-text'>{this.state.filed_msg}</p>
					</div>
				</div>
			</div>
		);
	}

	// handleNavClick(e){
	// 	console.log(e);
	// 	document.querySelector('.nav').style.display = 'block';
	// }

	handleCheckboxClick(e){
		console.log(e.target.getAttribute('span-flag'));
		let checkbox_icon = e.target;
		//获取选择状态
		let checkbox_flag = checkbox_icon.getAttribute('span-flag');
		//获取权限
		let check_root = checkbox_icon.getAttribute('_root');
		if( check_root == 'true' ){
			let checkbox_span = checkbox_icon.nextSibling.innerHTML;
			console.log(checkbox_span);
			if( checkbox_flag == 'true' ){
				checkbox_icon.className = 'flow-checkbox flow-checkbox-false';
				if( checkbox_span == '---货物流' ){
					this.setState({
						weightFlow:false
					})
				}else if( checkbox_span == '---资金流' ){
					this.setState({
						moneyFlow:false
					})
				}else if( checkbox_span == '---信息流' ){
					this.setState({
						messageFlow:false
					})
				}else if( checkbox_span == '重量' ){
					this.setState({
						weight:false
					})
				}else if( checkbox_span == '资金' ){
					this.setState({
						money:false
					})
				}
			}else{
				checkbox_icon.className = 'flow-checkbox flow-checkbox-true';
				if( checkbox_span == '---货物流' ){
					this.setState({
						weightFlow:true
					})
				}else if( checkbox_span == '---资金流' ){
					this.setState({
						moneyFlow:true
					})
				}else if( checkbox_span == '---信息流' ){
					this.setState({
						messageFlow:true
					})
				}else if( checkbox_span == '重量' ){
					this.setState({
						weight:true
					})
				}else if( checkbox_span == '资金' ){
					this.setState({
						money:true
					})
				}
			}
		}else{
			Message({
			    message: '对不起,您暂无权限',
			    type: 'warning'
			  });
		}

	}

	getflowWeightStyle(){
		let style;
		if( this.state.weightFlow == false || this.state.weight == false ){
			style = { display:'none' };
		};
		return style
	}

	getflowWeightLineStyle(){
		let style;
		if( this.state.weightFlow == false ){
			style = { display:'none' };
		};
		return style
	}

	getflowMessageLineStyle(){
		let style;
		if( this.state.messageFlow == false ){
			style = { display:'none' };
		};
		return style
	}

	getflowMoneyLineStyle(){
		let style;
		if( this.state.moneyFlow == false ){
			style = { display:'none' };
		};
		return style
	}

	getflowMoneyStyle(){
		let style;
		if( this.state.moneyFlow == false || this.state.money == false ){
			style = { display:'none' };
		};
		return style
	}

	componentDidMount(){
		this.getData();
		this.screenOnload();
		this.screenChange();
	}

	getData(){
		axios.get(' /count/countfactory/weightmoneyflowsmap')
			.then( this.handleGetDataSucc.bind( this ))
			.catch( this.handleGetDataErr.bind(this))
	}

	handleGetDataSucc( res ){
		console.log(res);
		if( res.status===200 ){
			if( res.data.code == 0 ){
				const {moneyList,weightList} = res.data.data;
				console.log(moneyList,weightList);
				let money = {};
				let weight = {};
				moneyList.map( ( item ) =>{
					for(var i in item ){
						money[i] = (item[i]/1000000).toFixed(2);
					}
				} );
				weightList.map( (item) =>{
					for( var i in item ){
						weight[i] = (item[i]/1000000).toFixed(2);
					}
				} )
				console.log(money,weight);
				this.setState({
					moneyList:money,
					weightList:weight
				})
				this.pageInit();
			}else{
				this.flow_mask.style.display = 'block';
				this.setState({
					filed_msg:res.data.msg
				})
				this.props.history.push('/login')
			}
		}else{
			this.flow_mask.style.display = 'block';
			this.setState({
				filed_msg:'请检查网络连接'
			})
		}
		
	}

	handleGetDataErr(e){
		console.log(e);
		this.flow_mask.style.display = 'block';
		this.setState({
			filed_msg:'请检查网络连接'
		})
	}

	pageInit(){
		//计算盒子位置
		let kioskLeft = this.kiosk.offsetLeft+(this.kiosk.offsetWidth/2)-20;
		let kioskTop = this.kiosk.offsetTop+this.kiosk.offsetHeight;
		let stationRight = this.station.offsetParent.offsetWidth-this.station.offsetLeft-20;
		//服务亭到分拣中心
		this.kioskTostation_line.style.top = kioskTop+15+'px';
		this.kioskTostation_line.style.left = kioskLeft+'px';
		this.kioskTostation_line.style.right = stationRight+'px';
		this.kioskTostation_arrow.style.top = kioskTop+11+'px';
		this.kioskTostation_arrow.style.right = stationRight-4+'px';
		//分拣中心到服务亭
		this.stationTokiosk_line.style.top = this.kiosk.offsetTop-this.stationTokiosk_line.offsetHeight-15+'px';
		this.stationTokiosk_line.style.left = kioskLeft+'px';
		this.stationTokiosk_line.style.right = stationRight+'px';
		this.stationTokiosk_arrow.style.top = kioskTop-this.kiosk.offsetHeight-20+'px';
		this.stationTokiosk_arrow.style.left = kioskLeft-3+'px';
		//加工厂到分拣中心
		this.plantTostation_line.style.top = kioskTop+15+'px';
		this.plantTostation_line.style.left = this.station.offsetLeft+this.station.offsetWidth-20+'px';
		this.plantTostation_line.style.right = this.plant.offsetParent.offsetWidth-this.plant.offsetLeft-20+'px';
		this.plantTostation_arrow.style.top = kioskTop+11+'px';
		this.plantTostation_arrow.style.left = this.station.offsetLeft+this.station.offsetWidth-24+'px';
		//加工厂到公司财务
		this.plantTofinance_line.style.top = kioskTop+15+'px';
		this.plantTofinance_line.style.left = this.finance.offsetLeft+this.finance.offsetWidth+20+'px';
		this.plantTofinance_line.style.right = this.plant.offsetParent.offsetWidth-this.plant.offsetLeft-this.plant.offsetWidth/2-20+'px';
		this.plantTofinance_line.style.bottom = this.finance.offsetParent.offsetHeight-this.finance.offsetTop-this.finance.offsetHeight/2+'px';
		this.plantTofinance_arrow.style.bottom = this.finance.offsetParent.offsetHeight-this.finance.offsetTop-this.finance.offsetHeight/2-4+'px';
		this.plantTofinance_arrow.style.left = this.finance.offsetLeft+this.finance.offsetWidth+14+'px';
		//财务到分拣中心
		this.financeTostation_line.style.top = kioskTop+15+'px';
		this.financeTostation_line.style.left = this.station.offsetLeft+this.station.offsetWidth/2+10+'px';
		this.financeTostation_line.style.right = this.finance.offsetParent.offsetWidth-this.finance.offsetLeft+20+'px';
		this.financeTostation_line.style.bottom = this.finance.offsetParent.offsetHeight-this.finance.offsetTop-this.finance.offsetHeight/2+'px';
		this.financeTostation_arrow.style.top = kioskTop+11+'px';
		this.financeTostation_arrow.style.left = this.station.offsetLeft+this.station.offsetWidth/2+6+'px';
		//交货客户到分拣中心
		this.customerTostation_line.style.top = kioskTop+15+'px';
		this.customerTostation_line.style.left =  this.customer.offsetLeft+this.customer.offsetWidth+20+'px';
		this.customerTostation_line.style.right = this.station.offsetParent.offsetWidth-this.station.offsetLeft-this.station.offsetWidth/2+10+'px';
		this.customerTostation_line.style.bottom = this.customer.offsetParent.offsetHeight-this.customer.offsetTop-this.customer.offsetHeight/2+'px';
		this.customerTostation_arrow.style.top = kioskTop+11+'px';
		this.customerTostation_arrow.style.left = this.station.offsetLeft+this.station.offsetWidth/2-19+'px';
		//分拣中心到交货客户
		this.stationTocustomer_line.style.top = kioskTop-10+'px';
		this.stationTocustomer_line.style.left = this.customer.offsetLeft+this.customer.offsetWidth/2+'px';
		this.stationTocustomer_line.style.right = stationRight+10+'px';
		this.stationTocustomer_line.style.bottom = this.customer.offsetParent.offsetHeight-this.customer.offsetTop+20+'px';
		this.stationTocustomer_arrow.style.top = this.customer.offsetTop-20+'px';
		this.stationTocustomer_arrow.style.left = this.customer.offsetLeft+this.customer.offsetWidth/2-4+'px';
		//加工厂到分拣中心
		this.plantTostation_money_line.style.top = this.kiosk.offsetTop-this.stationTokiosk_line.offsetHeight-15+'px';
		this.plantTostation_money_line.style.left = this.station.offsetLeft+this.station.offsetWidth+'px';
		this.plantTostation_money_line.style.right = this.plant.offsetParent.offsetWidth-this.plant.offsetLeft-this.plant.offsetWidth/2-20+'px';
		this.plantTostation_money_arrow.style.top = kioskTop-this.kiosk.offsetHeight-20+'px';
		this.plantTostation_money_arrow.style.left = this.station.offsetLeft+this.station.offsetWidth-4+'px';
	}

	screenOnload(){
		window.addEventListener('load', this.resize);
	}

	screenChange(){
		window.addEventListener('resize', this.resize);
	}

	resize(e){
		this.getHref();
	}

	getHref(){
		let href = window.location.hash;
		console.log(href);
		if( href=='#/flow' ){
			console.log(1);
			this.pageInit();
		}
	}
}

export default Flow;